<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>恒盛电子商务管理平台--后台管理</title>
<link href="${contextPath}css/garden.css" rel="stylesheet" type="text/css" />

<link href="${contextPath}css/bootstrap.css" rel="stylesheet">
<link href="${contextPath}css/style.css" rel="stylesheet">
<link href="${contextPath}css/basic.css" rel="stylesheet">

<link rel="Stylesheet" href="${contextPath}js/My97DatePicker/skin/default/datepicker.css" type="text/css" />
<link rel="Stylesheet" href="${contextPath}js/My97DatePicker/skin/whyGreen/datepicker.css" type="text/css" />
<link rel="Stylesheet" href="${contextPath}js/My97DatePicker/skin/WdatePicker.css" type="text/css" />

<script src="${contextPath}js/jquery-1.11.0.min.js"></script>
<script src="${contextPath}script/tools.js" type="text/javascript"></script>
<script src="${contextPath}script/basic.js" type="text/javascript"></script>
<script src="${contextPath}js/My97DatePicker/lang/zh-cn.js" type="text/javascript"></script>
<script src="${contextPath}js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>



</head>
<body>
<form id="imgQueryForm" >
<table class="search_term_table" style="margin-top:10px;">
	<tr><th style="width:70px;">上传时间：</th>
		<td style="width:300px;"><input type="text" id="time1" name="time1" value="${time1}" style="width:80px;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});"/> - <input type="text" id="time2" name="time2" value="${time2}" style="width:80px;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});"/></td>
		<th style="width:70px;">图片名称：</th>
		<td style="width:150px;">
			<input type="text" name="name" value="${name}" style="width:100px;"/>
			<input type="hidden" id="page" name="page" />
	    	<input type="hidden" name="CKEditor" value="${CKEditor}" />
	    	<input type="hidden" name="CKEditorFuncNum" value="${CKEditorFuncNum}" />
	    	<input type="hidden" name="langCode" value="${langCode}" />
	    	<input type="hidden" name="cu" value="${cu}" id="cu"/></td>
	    <td><a href="javascript:;" onclick="javascript: $('#cu').val('${cu_code}'); $('#imgQueryForm').submit();">[我上传的图片]</a>&nbsp;&nbsp;
	    	<a href="javascript:;" onclick="javascript: $('#cu').val(''); $('#imgQueryForm').submit();">[所有图片]</a></td>
		<td style="text-align:right;">
			<input type="submit" value="搜索" class="btn btn-info" />
		</td>
	</tr>
</table>

</form>
<div id="imgQueryResultList">
	<div class="brand-list">
		<div class="brand-bd cle" id="brand-waterfall">
			<#list pageBean.resultList as img>
			<div class="item">
				<p><a class="group1" href="javascript:;" title="${img.name}" onclick="javascript:browse_chooseImg('upload/${img.module}/${img.uuid}.${img.ext}');">
					<img src="upload/${img.module}/${img.uuid}.${img.ext}" /></a></p></div></#list>
		</div>
	</div>
</div>
<div class="pageBot" style="float:right; margin-right:20px;"><#import "/freemarker/pagination.ftl" as p><@p.paginationSubmit1 pageBean 'imgQueryForm' 'page' /></div>
<script type="text/javascript">
function browse_chooseImg(url) {
	window.opener.CKEDITOR.tools.callFunction(${callback}, url);
	window.close();
}

$(function(){
	$('#brand-waterfall').waterfall();
});
// 瀑布流插件
;(function ($) {
    $.fn.waterfall = function(options) {
        var df = {
            item: '.item',
            margin: 15,
            addfooter: true
        };
        options = $.extend(df, options);
        return this.each(function() {
            var $box = $(this), pos = [],
            _box_width = $box.width(),
            $items = $box.find(options.item),
            _owidth = $items.eq(0).outerWidth() + options.margin,
            _oheight = $items.eq(0).outerHeight() + options.margin,
            _num = Math.floor(_box_width/_owidth);

            (function() {
                var i = 0;
                for (; i < _num; i++) {
                    pos.push([i*_owidth,0]);
                } 
            })();

            $items.each(function() {
                var _this = $(this),
                _temp = 0,
                _height = _this.outerHeight() + options.margin;

                _this.hover(function() {
                    _this.addClass('hover');
                },function() {
                    _this.removeClass('hover');
                });

                for (var j = 0; j < _num; j++) {
                    if(pos[j][1] < pos[_temp][1]){
                        //暂存top值最小那列的index
                        _temp = j;
                    }
                }
                this.style.cssText = 'left:'+pos[_temp][0]+'px; top:'+pos[_temp][1]+'px;';
                //插入后，更新下该列的top值
                pos[_temp][1] = pos[_temp][1] + _height;
            });

            // 计算top值最大的赋给外围div
            (function() {
                var i = 0, tops = [];
                for (; i < _num; i++) {
                    tops.push(pos[i][1]);
                }
                tops.sort(function(a,b) {
                    return a-b;
                });
                $box.height(tops[_num-1]);

                //增加尾部填充div
                if(options.addfooter){
                    addfooter(tops[_num-1]);
                }

            })();

            function addfooter(max) {
                var addfooter = document.createElement('div');
                addfooter.className = 'item additem';
                for (var i = 0; i < _num; i++) {
                    if(max != pos[i][1]){
                        var clone = addfooter.cloneNode(),
                        _height = max - pos[i][1] - options.margin;
                        clone.style.cssText = 'left:'+pos[i][0]+'px; top:'+pos[i][1]+'px; height:'+_height+'px;';
                        $box[0].appendChild(clone);
                    }
                }
            }

        });
    }
})(jQuery);
</script>
</body>
</html>
